<template>
  <div>
    <div class="title">
        <h1>{{this.shopInfo.name}}</h1>
        
    </div>
    <van-tree-select
      height="200vw"
      :items="items"
      :main-active-index.sync="active"
    >
      <template #content>
         <van-card
          num="2"
          :price="item.foods[0].price"
          :desc="item.foods[0].info"
          :title="item.name"
          :thumb="item.goodsimg"
          v-for="(item, index) in shopDes"
          :key="index"
        >
          <template #tags>
            <van-tag plain type="danger">{{item.foods[0].description}}</van-tag>
            <van-tag plain type="danger">{{item.name}}</van-tag>
          </template>
          <template #footer>
            <van-button size="mini">+</van-button>
          </template>
        </van-card>

        <van-image
          v-if="active === 1"
      @click-nav="clickHandler"

        />
      </template>
    </van-tree-select>
  </div>
</template>
<script>
import Vue from "vue";
import { TreeSelect, Image ,Tag} from "vant";
import { Card } from "vant";

Vue.use(Card);
Vue.use(TreeSelect);
Vue.use(Image);
Vue.use(Tag);


export default {
  data() {
    return {
      active: 0,
      items: [{ text: "粥" }, { text: "烧饼" },{ text: "榨菜" },{ text: "馒头" }],
      // 商品个数
      shopDes:[],
      // 商家信息
      shopInfo:[],
      // 商品评价
      shopRating:[]
    };
  },
  mounted(){
    let data = JSON.parse(localStorage.getItem("shopDetail"));
    this.shopInfo = data.info;
    this.shopDes = data.goods;
    this.shopRating = data.rating;

  },
  methods: {
    clickHandler(){
      console.log(123);
    }
  }
};
</script>
<style scoped>
.van-button--mini{
  width:20px;
  height:20px;
  border-radius: 10px;
  background-color:#00ad74;
  color: white;
}
</style>